<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> -->
      <div id="Logo">
          <div id="LogoContent">
              <a href="/Main"><img src="~@/assets/images/logo-topbar.gif"></a>
          </div>
      </div>

            <div id="Menu">
                <div id="MenuContent">
                    <a v-if="signon == 1" href="/cart/viewCart"><img align="middle" name="img_cart" src="~@/assets/images/cart.gif" /></a>
                    <img align="middle" src="~@/assets/images/separator.gif"/>
                    <a v-if="signon == 0" href="/account/signon">Sign In</a>
                    <a v-if="signon == 1" href="#" @click="signoff">Sign Out</a>
                    <img v-if="signon == 1" align="middle" src="~@/assets/images/separator.gif"/>
                    <a v-if="signon == 1" href="/account/editAccount">My Account</a> <img align="middle" src="~@/assets/images/separator.gif" />
                    <a href="../help.html">?</a>
                </div>
            </div>

            <div id="Search">
                <div id="SearchContent">
                    <form action="/catalog/viewSearch" method="post">
                        <input type="text" name="keyword" size="14" />
                        <input type="submit" name="searchProducts" value="Search" />
                    </form>
                </div>
            </div>

            <div id="QuickLinks">
                <a href="/catalog/category?categoryId=FISH">
                    <img src="~@/assets/images/sm_fish.gif" />
                </a>
                <img src="~@/assets/images/separator.gif" />
                <a href="/catalog/category?categoryId=DOGS">
                    <img src="~@/assets/images/sm_dogs.gif" />
                </a>
                <img src="~@/assets/images/separator.gif" />
                <a href="/catalog/category?categoryId=REPTILES">
                    <img src="~@/assets/images/sm_reptiles.gif" />
                </a>
                <img src="~@/assets/images/separator.gif" />
                <a href="/catalog/category?categoryId=CATS">
                    <img src="~@/assets/images/sm_cats.gif" />
                </a>
                <img src="~@/assets/images/separator.gif" />
                <a href="/catalog/category?categoryId=BIRDS">
                    <img src="~@/assets/images/sm_birds.gif" />
                </a>
            </div>
    </div>
    <router-view/>
    <!-- <app-footer v- if = "footer_show" ></app-footer> -->
  </div>
</template>

<script>
  // import Footer from './Footer.vue'
  export default {
      name: "App",
      data(){
            return {
                signon: ''
            }
        },
        updated()
        {
            if(localStorage.getItem("token") != null)
            {
                this.signon = 1
            }
            else
            {
                this.signon = 0
            }
        },
        created()
        {
            if(localStorage.getItem("token") != null)
            {
                this.signon = 1
            }
            else
            {
                this.signon = 0
            }
        },
        methods: {
            signoff() {
                const _this = this
                localStorage.removeItem("token")
                localStorage.removeItem("username")
                alert('成功登出！')
                location.reload()
            }
        }
 }
</script>

<style scoped>
  @import "assets/css/jpetstore.css";
</style>

